/**
 * Created by Ysssssss on 2021/5/3.
 */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import {CloseSquareFilled, PlusSquareFilled} from "@ant-design/icons";
import {CustomizeDndProvider, DraggableDiv} from "@common/presentational/DndSort";
import {moveToNewIndex} from "@utils/arrayHelper";
import {MultiSelectProductModal, MultiSelectShelfProductModal} from "@common/presentational/MultiSelectModal";
import getCdnUrl from "@utils/getCdnUrl";
import {priceRangePreview} from "@utils/priceConversion";

class ProductChoose extends PureComponent {
    static propTypes = {
        value: PropTypes.array,
        onChange: PropTypes.func
    }

    constructor(props) {
        super(props);

        this.state = {
            getInfoAlready: !props.value.length,
        }

        this.multiSelectModalRef = React.createRef()
        this.productRefs = {}
    }

    handleProductChange (value) {
        const { onChange } = this.props
        onChange && onChange(value)
    }

    clearProductList () {
        const { onChange } = this.props
        onChange && onChange([])
    }

    sortList (dragId, hoverId) {
        const { onChange, value } = this.props
        let dragIndex = 0
        let hoverIndex = 0
        value.forEach((item, i) => {
            if(item.id === dragId) {
                dragIndex = i
            }
            if(item.id === hoverId) {
                hoverIndex = i
            }
        })
        onChange && onChange(moveToNewIndex(value, dragIndex, hoverIndex))
    }

    showAddProductModal () {
        this.multiSelectModalRef.current?.show()
    }

    render () {
        const { value } = this.props
        return (
            <div className="product-list-module">
                <div className="flex-row-between">
                    <div>已添加商品（{value.length}）</div>
                    <div className="clr-green">
                        <span className="cur-poi" onClick={this.showAddProductModal.bind(this)}>添加</span>
                        { value.length ? (
                            <span className="cur-poi mgl-16" onClick={this.clearProductList.bind(this)}>清空</span>
                        ) : null }
                    </div>
                </div>
                <CustomizeDndProvider>
                    { value.map(prod => {
                        if (!this.productRefs[prod.id]) {
                            this.productRefs[prod.id] = React.createRef()
                        }
                        return (
                            <DraggableDiv
                                key={prod.id}
                                id={prod.id}
                                type="productListModule"
                                dragRef={this.productRefs[prod.id]}
                                moveItemFunc={this.sortList.bind(this)}
                            >
                                <div className="product-module-item">
                                    <img src={getCdnUrl(prod.title_pic)} alt="" className="product-img"/>
                                    <div className="product-info">
                                        <div className="w-100 ft-14 ft-clr-md">{ prod.name }</div>
                                        <div className="w-100 ft-12 ft-clr-l">{ priceRangePreview(prod.price_range) }</div>
                                        <div className="operation-box">
                                            <CloseSquareFilled className="operation-icon" />
                                            <PlusSquareFilled className="operation-icon" ref={this.productRefs[prod.id]}/>
                                        </div>
                                    </div>
                                </div>
                            </DraggableDiv>
                        )
                    }) }
                </CustomizeDndProvider>
                <MultiSelectShelfProductModal
                    ref={this.multiSelectModalRef}
                    title="添加商品"
                    onChange={this.handleProductChange.bind(this)}
                    initSelectedInfo={value}
                />
            </div>
        )
    }
}

export default ProductChoose